<template>
  <div class="activity-manager">
    <h2>活动管理</h2>
    <!-- 这里添加活动管理的具体内容 -->
  </div>
  <div id="app">
        <div class="pc_box">
            <div class="pc_unit" v-for="(item) in activitylist" :key="item.title">
              <a :href="item.url">
                <img :src="item.img" alt="">
                <b>{{ item.title }}</b>
                <span>{{ item.type }}</span>
                <p>
                  时间：{{ item.time }}<br>
                  学分：{{ item.point }}
                </p>
              </a>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  name: 'ActivityManager',
  data() {
    return {
      activitylist: [
        {   
          title: "学习雷锋", 
          url: "https://www.mi.com/shop/buy/detail?product_id=10000412", 
          img: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/50b73aeedeeb27392a15d9d479e5d793.png?thumb=1&w=200&h=200&f=webp&q=90", 
          type: "思想成长", 
          time: "2025.2.26", 
          point: "0.1" 
        },
        { 
          title: "八段锦跟练", 
          url: "https://www.mi.com/shop/buy/detail?product_id=10000376", 
          img: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e3c300330221ad788569e4fb1e6f932f.jpg?thumb=1&w=200&h=200&f=webp&q=90",
          type: "文体活动", 
          time: "2025.2.26", 
          point: "0.1" 
        },
        { 
          title: "八段锦跟练", 
          url: "https://www.mi.com/shop/buy/detail?product_id=10000376", 
          img: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e3c300330221ad788569e4fb1e6f932f.jpg?thumb=1&w=200&h=200&f=webp&q=90",
          type: "文体活动", 
          time: "2025.2.26", 
          point: "0.1" 
        },
        { 
          title: "八段锦跟练", 
          url: "https://www.mi.com/shop/buy/detail?product_id=10000376", 
          img: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e3c300330221ad788569e4fb1e6f932f.jpg?thumb=1&w=200&h=200&f=webp&q=90",
          type: "文体活动", 
          time: "2025.2.26", 
          point: "0.1" 
        },
        { 
          title: "八段锦跟练", 
          url: "https://www.mi.com/shop/buy/detail?product_id=10000376", 
          img: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e3c300330221ad788569e4fb1e6f932f.jpg?thumb=1&w=200&h=200&f=webp&q=90",
          type: "文体活动", 
          time: "2025.2.26", 
          point: "0.1" 
        },
        {   
          title: "学习雷锋", 
          url: "https://www.mi.com/shop/buy/detail?product_id=10000412", 
          img: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/50b73aeedeeb27392a15d9d479e5d793.png?thumb=1&w=200&h=200&f=webp&q=90", 
          type: "思想成长", 
          time: "2025.2.26", 
          point: "0.1" 
        }
      ]
    };
  }
}
</script>

<style scoped>
.activity-manager {
  flex: 1;
  padding: 20px;
}

ul,
    li {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    a {
      text-decoration: none;
      color: #333;
    }

    b {
      font-weight: normal;
    }

    .pc_box {
      padding: 15px 15px 0;
      background-color: #f4f4f4;
      width: 90%;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      font-size: 14px;
    }

    .pc_unit {
      width: 230px;
      height: 320px;
      box-sizing: border-box;
      padding: 30px;
      background-color: #fff;
      margin-bottom: 15px;
      /* margin: 20px; */
    }

    .pc_unit a {
      display: block;
      display: flex;
      align-items: center;
      flex-direction: column;
    }

    .pc_unit a span {
      color: #ccc;
      font-size: 13px;
    }

    .pc_unit a p {
      color: #409eff;
      font-size: 13px;
      text-align: center;
    }

    .pc_unit a p del {
      color: #ccc;
    }
</style> 